<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>capability</title>
</head>
<body>

  <input id="first">
  <input id="second">
  <a href="#void" id="third">test</a>
  <input id="fourth">

  <script src="../../node_modules/requirejs/require.js"></script>
  <script>
    require.config({
      paths: {
        ally: '../../dist/amd',
        // shims required by ally.js
        'css.escape': '../../node_modules/css.escape/css.escape',
        'platform': '../../node_modules/platform/platform',
      }
    });

    require([
      'ally/util/platform',
    ], function(platform) {
      window._platform = platform;
    });
  </script>

  <script>
    window.events = [];
    function logEvent(event) {
      window.events.push(event.type + ':' + (event.target.id || event.target.nodeName));
    }

    function logKeyEvent(event) {
      var message = [
        event.type,
        (event.target.id || event.target.nodeName),
        event.keyCode,
        event.altKey && 'alt',
        event.ctrlKey && 'ctrl',
        event.metaKey && 'meta',
        event.shiftKey && 'shift',
      ].filter(Boolean).join(':');
      window.events.push(message);
    }

    [
      'focus', 'blur', 'focusin', 'focusout', 'DOMFocusIn', 'DOMFocusOut', 'domfocusin', 'domfocusout',
      'mousedown', 'mouseup', 'click', 'touchstart', 'touchend',
      'pointerdown', 'pointerup', 'MSPointerDown', 'MSPointerUp',
      'input', 'beforeinput',
    ].forEach(function(eventName) {
      document.body.addEventListener(eventName, logEvent, true);
    });

    [
      'keydown', 'keyup', 'keypress',
    ].forEach(function(eventName) {
      document.body.addEventListener(eventName, logKeyEvent, true);
    });
  </script>

</body>
</html>
